<template>
    <el-dialog v-model="visible" :title="title" @close="cancel" width="20%">
        <el-checkbox-group v-model="checkList" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
            <div v-for="item in userList" style="width:50%;"><el-checkbox :label="item.username" :value="item.id" /></div>
        </el-checkbox-group>
        <template #footer>
            <el-button @click="cancel()">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, nextTick } from 'vue'
import { ElMessage } from 'element-plus/es'
import { getAllUser, authoritySave } from '@/api/allApi'

const emit = defineEmits(['resetList'])

const visible = ref(false)
const title = ref('分配权限')
const rowId = ref('')
const checkList = ref<string[]>([])

const userList = ref<{ userId: string; username: string }[]>([])

const init = (row: any) => {
	visible.value = true
	checkList.value = row.agCategoryPermissions.map(item => item.userId)
	rowId.value = row.id
	getAllUser().then((res: any) => {
		userList.value = res.data.list
	})
}
const submit = () => {
	const params = []
	checkList.value.forEach(item => {
		params.push({
			userId: item,
			categoryId: rowId.value
		})
	})
	authoritySave(params).then((res: any) => {
		ElMessage.success('分配权限操作成功')
		emit('resetList')
		visible.value = false
	})
}

defineExpose({
	init
})
</script>
<style lang="scss" scoped>
</style>
